<template>
	<view class="container">
		<view class="msg-list" v-for="i in 10" :key="i">
			<view class="time">2021-11-02</view>
			<view class="other flex">
				<view class="h-pic">
					<image class="image" src="../static/icon/my/my(1).png"></image>
				</view>
				<view class="msg">您好，请问有什么可以帮助您请问有什么可以帮助您请问有什么可以帮助您请问有什么可以帮助您请问有什么可以帮助您？</view>
			</view>
			<view class="my flex j-end">
				<view class="msg">您好请问这个任务怎么做？</view>
				<view class="h-pic">
					<image class="image" src="../static/icon/my/my(1).png"></image>
				</view>
			</view>
		</view>
		<view class="option fixed">
			<view class="base flex j-between a-center">
				<view class="voice flex j-center a-center">
					<u-icon name="wifi" size="40"></u-icon>
				</view>
				<view class="flex edit">
					<view class="input">
						<u-input maxlength="1000" type="textarea" placeholder="发送信息..." height="72"></u-input>
					</view>
					<view class="flex j-center a-center emoji">
						<u-icon name="account" size="40"></u-icon>
					</view>
				</view>
				<view class="pic flex j-center a-center">
					<u-icon name="photo" size="50"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
</script>

<style lang="scss" scoped>
.container{padding: 32rpx 24rpx;}
.msg-list{
	.time{font-size: 24rpx;color: #999;text-align: center;}
	.h-pic{width: 80rpx;height: 80rpx;border-radius: 100%;overflow: hidden;}
	.msg{padding: 20rpx 24rpx;background-color: #eee;border-radius: 16rpx;
		color: #333;font-size: 28rpx;
	}
	.other{margin: 48rpx 0;
		.msg{margin-left: 36rpx;max-width: 468rpx;position: relative;
			&::before{width: 20rpx;height: 20rpx;transform: rotateZ(-45deg) translateY(-50%) skew(20deg,20deg);
			background-color: #eee;
				position: absolute;left: -2rpx;top:40rpx;content: '';
			}
		}
	}
	.my{margin: 48rpx 0;
		.msg{margin-right: 36rpx;max-width: 468rpx;background-color: #246FDD;
			color: #FFF;position: relative;
			&::before{width: 20rpx;height: 20rpx;transform: rotateZ(-45deg) translateY(-50%) skew(20deg,20deg);
			background-color: #246FDD;
				position: absolute;right: -16rpx;top:40rpx;content: '';
			}
		}
	}
}
.option{left: 0;right: 0;bottom: 0;
	.base{height: 98rpx;background-color: #FFF;color: #999;padding: 0 32rpx;
		.voice{width: 48rpx;height: 48rpx;border:2rpx solid #999;border-radius: 100%;transform: rotateZ(90deg);}
		.pic{width: 48rpx;height: 48rpx;}
		.edit{width: 526rpx;height: 72rpx;border-radius: 200rpx;background-color: #F2F2F2;
			padding: 0 24rpx;
			.input{width: 450rpx;overflow: scroll;}
		}
	}
}
</style>
